<template>
	<view class="indexContainer">
		<view class="header">
			
			<image class="logo" src="../../static/images/logo.png"></image>
			<view class="search">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder="搜索..." placeholder-class="placeholder"/>
			</view>
			<button type="default">搜索</button>
		</view>
		<scroll-view class="navscroll" scroll-x="true">
			<view class="navItem" :class="{active:navIndex===-1}" @click="getIndex(-1,-1)">推荐</view>
			<view class="navItem" :class="{active:navIndex===index}" @click="getIndex(index,item.L1Id)" v-for="(item,index) in indexData.kingKongModule.kingKongList" :key="item.L1Id">{{item.text}}</view>
		</scroll-view>
		<Recommend v-if="navIndex===-1"/>
		<CateList v-else :L1Id='L1Id'></CateList>
	</view>
	
</template>

<script>
	import request from '../../utils/request.js'
	import { mapActions, mapState } from 'vuex';
	import Recommend from '../../components/Recommend.vue'
	import CateList from '../../components/CateList.vue'
	export default {
		data() {
			return {
			navIndex:-1,
			L1Id:-1
			}
		},
		components:{
			Recommend,
			CateList
		},
		onLoad() {

		},
		computed:{
			 ...mapState('home',['indexData'])
		},
		created() {
			this.getIndexDataActions()
		},
		methods: {
		...mapActions('home',['getIndexDataActions']),
		// async getIndexData(){
		// 	const res =await request('/getIndexData')
		// 	this.indexData=res.indexData;
		// 	},
			getIndex(index,L1Id){
				this.navIndex=index;
				this.L1Id=L1Id
			}
		}
	};
</script>

<style lang="stylus">
	.indexContainer
		.header
			display flex
			padding 10rpx 5rpx
			.logo
				width 140rpx
				height 40rpx
				margin: 10rpx
			.search
				width 420rpx
				height 60rpx
				background-color #f5f5f5
				position: relative
				input
					width 360rpx
					height 60rpx
					margin-left: 60rpx
					.placeholder
						font-size 26rpx
				.iconfont
					position absolute
					font-size 40rpx
					left 10rpx
					top 10rpx
			button
				width 144rpx
				height 60rpx
				line-height 60rpx
				text-align center
				padding 0 4rpx
				// font-size 26rpx
		.navscroll
			height 80rpx
			display flex
			white-space nowrap
			.navItem
				display inline-block
				height 40rpx
				// font-size 26rpx
				padding 10rpx
				&.active
					border-bottom 4rpx solid #BB2C08 
	.test
		color red
</style>
	
			
			